<template>
  <div class="content-wraper">
    <div class="common-page">
      <div class="content-left">
        <el-button type="primary" size="small" @click="showTargetManggeModal = true">指标分类管理</el-button>
        <div class="tree-wraper">
          <tree-box
            v-model="selectedNode"
            no-search
            :data="treeData"
            :title="treeTitle"
          />
        </div>
      </div>
      <div class="content-right">
        <div class="search-box">
          <el-input
            v-model="keyword"
            style="width: 300px;"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
          />
          <el-button type="success" icon="el-icon-plus" style="margin-left:10px;" @click="addTarget">新增</el-button>

        </div>
        <div class="detail">
          <!-- <manage-detail ref="modifyForm" :data="orgDetail" /> -->
          <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
            <template v-slot:name="{row}">
              <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
            </template>
            <template v-slot:options="{row}">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="editTarget(row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delTarget(row)">删除</el-button>
            </template>
          </com-table>
        </div>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="新增指标分类"
      :visible.sync="showAdd"
      width="500px"
      center
      append-to-body
    >
      <el-form ref="form" :rules="rules" style="padding-top: 10px;" :model="form" label-width="100px">
        <el-form-item label="编号" prop="number">
          <el-input v-model="form.number" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="评定指标" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="分值" prop="fraction">
          <el-input v-model="form.fraction" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAdd = false">取 消</el-button>
        <el-button type="primary" @click="saveTargetSet">确 定</el-button>
      </span>
    </el-dialog>
    <target-tree :type="type" :show-modal.sync="showTargetManggeModal" @freshTree="getSupplierIndexCategoryTree" />
  </div>
</template>

<script>
import {
  getSupplierIndexInfoList,
  getSupplierIndexCategoryTree,
  addSupplierIndexInfo,
  updateSupplierIndexInfo,
  deleteSupplierIndexInfo
} from '@/api/travellingTraderManage'
import targetTree from './targetTree.vue'
export default {
  name: 'Document',
  components: {
    targetTree
  },
  props: {
    treeTitle: {
      type: String,
      default: '指标分类'
    },
    type: {
      type: String,
      default: ''
    },
    typeLabel: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      keyword: '',
      detailData: {},
      treeData: [],
      selectedNode: null,
      showTargetManggeModal: false,
      showAdd: false,
      dataList: [],
      optType: 'add',
      form: {
        name: '',
        number: '',
        fraction: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'change' }
        ]
      },
      columns: [
        {
          label: '编号',
          prop: 'number'
        },
        {
          label: '名称',
          prop: 'name',
          slot: 'name'
        },
        {
          label: '评定指标',
          prop: 'description'
        },
        {
          label: '分值',
          prop: 'fraction'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '180',
          prop: 'options',
          slot: 'options'
        }
      ],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    selectedNode(newValue) {
      // this.getDetail(newValue)
      this.getDataList()
    }
  },
  mounted() {
    this.getSupplierIndexCategoryTree()
  },
  methods: {
    addTarget() {
      if (!this.selectedNode) {
        this.$message({
          type: 'error',
          message: '请先新增指标分类!'
        })
        return
      }
      this.optType = 'add'
      this.showAdd = true
    },
    editTarget(data) {
      this.optType = 'edit'
      this.detailData = data
      Object.keys(this.form).map(key => {
        this.form[key] = data[key]
      })
      this.showAdd = true
    },
    delTarget(data) {
      this.$confirm('确定要删除该条数据吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = data
        deleteSupplierIndexInfo({
          supplierIndexInfoId: id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getDataList()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    saveTargetSet() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            type: this.type,
            supplierIndexCategoryId: this.selectedNode.id,
            ...this.optType === 'edit' ? {
              id: this.detailData.id
            } : {}
          }
          // if (!this.selectedNode) {
          //   params.parentId = null
          // } else {
          //   const { id, parentId } = this.selectedNode
          //   const createId = this.addType === 'same' ? (parentId || null) : id
          //   params = {
          //     ...params,
          //     parentId: this.addType ? createId : parentId,
          //     ...!this.addType ? { id } : {}
          //   }
          // }
          const fn = this.optType === 'add' ? addSupplierIndexInfo : updateSupplierIndexInfo
          fn(params).then(res => {
            if (res.code === '0001') {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.showAdd = false
              this.getDataList()
              this.$refs.form.resetFields()
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        }
      })
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        type: this.type,
        ...this.selectedNode ? {
          supplierIndexCategoryId: this.selectedNode.id
        } : {}
      }
      getSupplierIndexInfoList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    getSupplierIndexCategoryTree() {
      getSupplierIndexCategoryTree({ supplierIndexCategoryType: this.type }).then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
      })
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.supplierDetail = data
      this.showAddFileModal = true
    }
  }
}
</script>

<style lang="scss" scoped>
.com-link{
  color: #599cf8;
  &:hover {
    text-decoration:underline;
  }
}
.common-page{
  height:100%;
  display: flex;
  .content-left,.content-right{
    height: 100%;
  }
  .content-left{
    padding-right: 10px;
    border-right: 1px solid #dedede;
    width: 300px;
  }
  .content-right{
    padding-left: 10px;
    flex: 1;
    .search-box{
      display: flex;
      align-items: center;
      height: 50px;
    }
    .detail{
      height: calc(100% - 50px);
      // margin-top: 10px;
      overflow: auto;
    }
  }
  .tree{
    height: 100%;
    // padding-top: 10px;
  }
}
</style>
